<template>
  <!-- <view class="notice-bar" @tap="handleTapNotice">
      <u-notice-bar :text="text1" v-if="text1.length > 0"></u-notice-bar>
    </view> -->
  <MidLayout>



    <IndexTitle zh_text="画册" en_text="Catalogs"></IndexTitle>

    <view class="gray">
      <view v-for="item, index in props.download_categories" :key="index">


        <view v-if="index == 0">
          <view class="title" style="margin-top: -20rpx;">
            <view class="zh font">{{ item.title }}</view>
          </view>


          <view class="layout-1">
            <view class="layout-1-item" v-for="_item, _index in item.items" :key="_index">
              <up-image :src="_item.image" @tap="handleClick(_item)" radius="10" width="100%" :height="height"
                mode='aspectFill' :showMenuByLongpress="false"></up-image>
            </view>
          </view>
        </view>

        <view v-if="index == 1">
          <view class="title">
            <view class="zh font">{{ item.title }}</view>
          </view>
          <view v-for="_item, _index in item.items" :key="_index">
            <view>
              <up-image :src="_item.image" @tap="handleClick(_item)" radius="10" width="100%" :height="height"
                mode='aspectFill' :showMenuByLongpress="false"></up-image>
            </view>
          </view>
        </view>

      </view>

    </view>
  </MidLayout>

</template>

<script setup lang="ts">
import { defineProps, ref } from 'vue'
import IndexTitle from '@/pages/walls/index-title.vue'
const height = ref('200rpx')
const props = defineProps({
  download_categories: {
    type: Array,
    default: []
  }
})

const openMap = (item) => {
  wx.openLocation({
    latitude: item.geo_location.location.lat,
    longitude: item.geo_location.location.lng,
    name: item.geo_location.title,
  })
}




const handleClick = (union) => {

  uni.navigateTo({
    url: `/pages/download/index?id=${union.id}`
  })


}




</script>

<style lang="scss" scoped>
.title {
  padding: 10rpx 0rpx !important;

  .zh {
    font-weight: normal !important;
    font-size: 24rpx !important;
  }
}

.mid-image-font {
  margin-bottom: 15rpx;
}




.layout-1 {
  display: flex;
  flex-direction: row;
  gap: 20rpx;

  .layout-1-item {
    flex: 1;
  }
}
</style>
